<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--准备好一个“容器”-->
    <div id="test"></div>

    <!--引入react核心库,必须在dom前面引入-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react_dom，用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel，用于将jsx转为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--引入prop-types，用于对组件标签属性进行限制-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        class Demo extends React.Component{
            showData(){
                console.log(this.refs)
                const {input1} = this.refs
                alert(input1.value)
            }
            showData2 = () =>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={()=>{this.showData();}}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

    </script>
</body>
</html>